<template>
  <div style="background: #f5f5f5">
    <pageTop :text="text"></pageTop>
    <div @click="blank">
      <slideBar></slideBar>
      <div>
        <div class="imgBox">
          <img src="../assets/napin.png" alt="">
          <p class="text">
            海纳天下精品，流通创造价值。<br>
            以精选好品，深度折扣为经营理念<br>
            致力于成为羽绒服供应链转型的先驱者<br>
            致力于羽绒服供应链各节点资源的深度挖掘、整合与匹配，并提供完整优质的服务。<br>
            致力于实现供应链整体资源配置最优和参与者利益最大化。
          </p>
        </div>
        <div class="history">
          <p style="font-size: 15px;color: #333;text-align: center;font-weight: bold;margin-bottom: 4vw;">纳品网发展史</p>
          <div class="line"></div>
          <div style="width: 100%;height: auto;">
            <div class="year" v-for="(w,key) in history" :key="key" style="margin-top: 12vw;overflow: hidden" :id="year(key)" >
              <span class="years">{{w.years}}</span>
              <div class="circle">
                <div class="yuan"></div>
              </div>
              <span class="text">{{w.content}}</span>
            </div>
          </div>
        </div>
        <div class="environ">
          <p>公司环境</p>
          <ul>
            <li v-for="(v,i) in companyImage" :key="i">
              <img :src="v.img" alt="">
            </li>

          </ul>
        </div>
      </div>
      <gotop></gotop>
    </div>
    <pageBottom></pageBottom>
  </div>
</template>

<script>
  import pageTop from '../components/pageTop'
  import slideBar from '../components/slideBar'
  import gotop from '../components/public/goTop'
  import pageBottom from '../components/pageBottom'
  export default {
    name: "aboutUs",
    components:{
      pageTop,
      slideBar,
      gotop,
      pageBottom
    },
    data(){
      return{
        text:'关于我们',
        companyImage:[],
        history:[],
      }
    },
    mounted(){
      var that=this;
      this.$http({
        url:'/offcial/index.php/index/Acticle/Development',
        method:'post',
        data:{
          time:this._globe.time1,
          device_id:this._globe.device_id,
          version:this._globe.version,
          platform:this._globe.platform,
          token:this._globe.token1,
        }
      })
        .then(function (response) {
          /*console.log(response);*/
          const resData=response.data;
          if(resData.code==1){
            that.history = resData.data;
            console.log(that.history);
          }
        })
        .catch(function (response) {
          console.log(response);
        })
    },
    created(){
      var that=this;
      this.$http({
        url:'/offcial/index.php/index/Acticle/CompanyEnvironment',
        method:'post',
        data:{
          time:this._globe.time1,
          device_id:this._globe.device_id,
          version:this._globe.version,
          platform:this._globe.platform,
          token:this._globe.token1,
        }
      })
        .then(function (response) {
         /* console.log(response);*/
          const resData=response.data;
          if(resData.code==1){
            that.companyImage = resData.data;
            /*console.log(that.companyImage);*/
          }
        })
        .catch(function (response) {
          console.log(response);
        })

    },
    methods:{
      year:function(key){
        return "year" + key
      },
      blank(){
        $("#containers").css(
          {"transform":"translateX(0vw)","transition":"transform .5s"});
      },
      menu(){
        $("#containers").css(
          {"transform":"translateX(72vw)","transition":"transform .5s"});
      }
    },
  }
</script>

<style scoped lang="scss">
.imgBox{
  width: 100vw;
  height: 106.67vw;
  margin-top: 4vw;
  position: relative;
    .text{
      width: 80vw;
      height: 66.67vw;
      background: rgba(0,0,0,.5);
      text-align: left;
      color: #fff;
      padding: 9vw 5.3vw 12vw 4vw;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-border-radius: 3vw;
      -moz-border-radius: 3vw;
      border-radius: 3vw;
      position: absolute;
      top: 22vw;
      font-size: 14px;
      left: 9.5vw;
      line-height: 30px;
    }
    img{
      width: 100%;
      height: 100%;
      display: inline-block;
    }
}
.history{
    width: 100vw;
   /* height: 187vw;*/
    background: #fff;
  height: auto;
    margin-top: 4vw;
    padding-top: 4.67vw;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  padding-bottom: 20vw;
  position: relative;
      .line{
        height:93%;
        border-left: 1px solid #999999;
        position: absolute;
        left: 30%;
      }
    .year{
      color: #333;
      font-size: 13px;
     /* position: relative;*/
      padding-left: 6.7vw;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      top: 3vw;
      height: auto;
      padding-top: .5vw;
      width: 100%;
      position: relative;
      .text{
        width: 65.07vw;
        height: 100%;
        text-align: left;
      }
      .years{
        float: left;
        width: 16vw;
        height: auto;
        display: inline-block;
        background-color: rgba(255,76,80,.3);
        border-radius: 10px;
        line-height: 4vw;
      }
      .circle{
        width: 12px;
        height: 12px;
        border: 1px solid #999;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        display: inline-block;
        float: left;
        margin-left: 5.7vw;
        position: relative;
        background: #fff;
          .yuan{
            background: #000;
            width:50%;
            height:50%;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
          }
      }
      span{
        float: right;
      }
    }
  }
/*.history div:last-child{
  margin-top: 16vw !important;
}*/
.environ{
  width: 100vw;
  height: 64vw;
  background: #fff;
  margin-top: 4vw;
  padding-top: 4vw;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  ul{
    white-space:nowrap;
    margin-top: 4vw;
    margin-left: 2vw;
    overflow: scroll;
    li{
      display: inline-block;
      margin-left: 2vw;
    }
  }
    img{
      width: 77.33vw;
      height: 46vw;
      -webkit-border-radius: 4vw;
      -moz-border-radius: 4vw;
      border-radius: 4vw;
    }
    p{
      color: #333;
      font-size: 15px;
    }
}
@media screen and (min-width: 320px) and (max-width:375px){
 /* .history{
    height: 120vh !important;
  }*/
 .imgBox .text{
   padding-top: 5vw !important;
   font-size: 12px !important;
   line-height: 29px !important;
 }

  .history .year .text{
    width: 63.07vw !important;
    font-size: 12px !important;
    margin-right: 3vw;
  }
  .history .year .years{
    font-size: 12px !important;
  }
}
@media screen and (min-width: 320px) and (max-width:374px){
 /* .history .year .circle .yuan{
    top: -2.1vw !important;
  }*/
 /* .history{
    height: 195vw !important;
  }*/
}
@media screen and (min-width: 375px)and (max-width:414px){
 /* .history .year .circle .yuan{
    top: -1.6vw !important;
  }*/
  /*.history{
    height: 112vh !important;
  }*/
}
/*@media screen and (min-width: 414px){
  .history{
    height: 112vh !important;
  }
}*/
</style>
